<template>
<div class="page-carousel-min">
<!--   <a-carousel arrows dotsClass="slick-dots slick-thumb">
    <a slot="customPaging" slot-scope="props">
      <img :src="getImgUrl(props.i)" />
    </a>
    <div v-for="(item, index) in carouselList" :key="index">
      <img :src="item.img" />
    </div>
  </a-carousel> -->
  <img class="carouse-max-img" :src="FileUploadUrl2+maxImg" />
  <div class="carousel-slider">
    <div @click="carouselPrev" class="carousel-prev"><a-icon type="left" /></div>
    <div class="carousel-slider-list" :style="'left:'+left+'px'">
      <img @click="switchmMax(index)" v-for="(item, index) in carouselList" :key="index" :src="FileUploadUrl2+item" />
    </div>
    <div @click="carouselNext" class="carousel-next"><a-icon type="right" /></div>
  </div>
<!--   <a-carousel arrows dots="false" width="100">
    <div
      slot="prevArrow" slot-scope="props"
      class="custom-slick-arrow"
      style="left: 10px;zIndex: 1"
    >
      <a-icon type="left-circle" />
    </div>
    <div
      slot="nextArrow" slot-scope="props"
      class="custom-slick-arrow"
      style="right: 10px"
    >
      <a-icon type="right-circle" />
    </div>
    <div v-for="(item, index) in carouselList" :key="index">
      <img :src="item.img" />
    </div>
  </a-carousel> -->
</div>
</template>
<script>
import { environment } from '@/server/environment'
	export default {
	  data() {
	    return {
        FileUploadUrl2:environment.FileUploadUrl2,
        maxImg: '',
        left: 0,
        step: 115
	    }
	  },
    props: {
      carouselList: {
        type: Array,
        default: () => {
          return [];
        }
      },
    },
    created() {
      this.maxImg = this.carouselList[0];
    },
	  methods: {
      switchmMax(i) {
        this.maxImg = this.carouselList[i];
      },
      carouselPrev(){
        if (this.left<0) {
          this.left = this.left + this.step;
        }
      },
      carouselNext(){
        if (Math.abs(this.left)<this.step*(this.carouselList.length-3)) {
          this.left = this.left - this.step;
        }
      }
	  }
}
</script>
<style lang="scss">
.page-carousel-min{
  .carousel-slider{
    overflow: hidden;
    position: relative;
  }
  .carouse-max-img{
    width: 229px;
    height: 145px;
    margin-bottom: 8px;
  }
  .carousel-slider-list{
    width: 10000px;
    position: relative;
    left: 0;
    img{
      width: 73px;
      height: 41px;
      cursor: pointer;
      margin-right: 7px;
    }
  }
  .carousel-prev,.carousel-next{
    width: 10px;
    height: 42px;
    background: rgba(0,0,0,0.6);
    position: absolute;
    top: 0px;
    cursor: pointer;
    color: #ffffff;
    line-height: 42px;
    z-index: 2;
  }
  .carousel-prev{
    left: 0px;
  }
  .carousel-next{
    right: 0px;
  }
  .anticon{
      font-size:8px;
  }
}
</style>